<template>
  <div style="background:#f3f3f3">
    <header 
      class="mint-header" 
      style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button 
          class="mint-button mint-button--default mint-button--normal" 
          style="font-size: 15px;" 
          @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back" />
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">审批</h1>
      <div class="mint-header-button is-right" />
    </header>
    <!-- <div style="height:40px" /> -->
    <!-- <div>{{equilist.length}}</div> -->
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">我提交的</mt-tab-item>
      <mt-tab-item id="2">我审批的</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <mt-navbar 
          v-model="selected2" 
          style="boeder-bottom:none">
          <mt-tab-item 
            id="3" 
            style="border:none">
            <mt-button 
              id="color3" 
              style="font-size:12px;padding:4px 20px;height:25px;background:rgb(220, 223, 230);color:#fff;font-size:16px;" 
              @click="changecor2('1')">待处理</mt-button>
          </mt-tab-item>
          <mt-tab-item 
            id="4" 
            style="border:none">
            <mt-button 
              id="color4" 
              style="font-size:12px;padding:4px 20px;height:25px;background:rgb(220, 223, 230);color:#fff;font-size:16px;" 
              @click="changecor2('2')">已完成</mt-button>
          </mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected2">
          <mt-tab-container-item id="3">
            <div v-if="equilist1.length==0">
              <img 
                src="../static/zanwu.png" 
                alt 
                style="width:100%">
              <div style="text-align:center;color:#35495e">暂无相关内容</div>
            </div>
            <div v-else>
              <div 
                v-for="(item, index) in equilist1" 
                :key="index" 
                class="equi-div1">
                <div class="equi-left">
                  <h3 class="h3_equi">{{ item.hash.atypename }}</h3>
                  <div class="equi-div equi-gz">
                    <span class="equi-span2">
                      提交人：
                      <b style="color:rgb(38, 162, 255);font-weight:normal">{{ item.hash.createusername }}</b>
                    </span>
                  </div>
                  <div 
                    class="equi-div" 
                    style="display:flex">
                    <span class="equi-span2">
                      提交时间：
                      <b style="color:rgb(104, 104, 104);font-weight:normal">{{ item.hash.intime }}</b>
                    </span>
                  </div>
                  <div class="equi-div equi-gz">
                    <span class="equi-span2">
                      部门：
                      <b style="color:rgb(144, 147, 153);font-weight:normal">{{ item.hash.bumen }}</b>
                    </span>
                  </div>

                  <div 
                    class="equi-div" 
                    style="display:flex">
                    <span class="equi-span2">
                      内容：
                      <b style="color:rgb(144, 147, 153);font-weight:normal">{{ item.hash.content }}</b>
                    </span>
                  </div>
                  <div 
                    class="equi-div" 
                    style="display:flex">
                    <span class="equi-span2">
                      状态：
                      <b v-if="item.hash.status=='1'">审批中</b>
                      <b 
                        v-if="item.hash.status=='-1'" 
                        style="color:red">被驳回</b>
                      <b 
                        v-if="item.hash.status=='0'" 
                        style="color:#666666">申请人撤回</b>
                      <b v-if="item.hash.status=='2'">通过</b>
                    </span><b style="color:rgb(29, 206, 87);font-weight:normal">{{ item.hash.caozuoren }}{{ item.hash.maxrecordtime }}</b>
                  </div>
                </div>
                <div style="float:right;display:inline-block;padding-top:50px;padding-right:10px">
                  <mt-button 
                    type="primary" 
                    size="small" 
                    @click="gocehui(item)">撤回</mt-button>
                </div>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="4">
            <div v-if="equilist2.length==0">
              <img 
                src="../static/zanwu.png" 
                alt 
                style="width:100%">
              <div style="text-align:center;color:#35495e">暂无相关内容</div>
            </div>
            <div v-else>
              <div 
                v-for="(item, index) in equilist2" 
                :key="index" 
                class="equi-div1" 
                @click="checkinfo(item,'0')">
                <div class="equi-left">
                  <h3 class="h3_equi">{{ item.hash.atypename }}</h3>
                  <div class="equi-div equi-gz">
                    <span class="equi-span2">
                      提交人：
                      <b style="color:rgb(38, 162, 255);font-weight:normal">{{ item.hash.createusername }}</b>
                    </span>
                  </div>
                  <div 
                    class="equi-div" 
                    style="display:flex">
                    <span class="equi-span2">
                      提交时间：
                      <b style="color:rgb(104, 104, 104);font-weight:normal">{{ item.hash.maxrecordtime }}</b>
                    </span>
                  </div>
                  <div class="equi-div equi-gz">
                    <span class="equi-span2">
                      部门：
                      <b style="color:rgb(144, 147, 153);font-weight:normal">{{ item.hash.bumen }}</b>
                    </span>
                  </div>
                  <div class="equi-div equi-gz">
                    <span class="equi-span2">
                      操作人：
                      <b style="color:rgb(29, 206, 87);font-weight:normal">{{ item.hash.caozuoren }}</b>
                    </span>
                  </div>
                  <div 
                    class="equi-div" 
                    style="display:flex">
                    <span class="equi-span2">
                      内容：
                      <b style="color:rgb(144, 147, 153);font-weight:normal">{{ item.hash.content }}</b>
                    </span>
                  </div>
                  <div 
                    class="equi-div" 
                    style="display:flex">
                    <span class="equi-span2">
                      状态：
                      <b v-if="item.hash.status=='1'">审批中</b>
                      <b 
                        v-if="item.hash.status=='-1'" 
                        style="color:red">被驳回</b>
                      <b 
                        v-if="item.hash.status=='0'" 
                        style="color:#666666">申请人撤回</b>
                      <b v-if="item.hash.status=='2'">通过</b>
                    </span>
                  </div>
                </div>
                <div style="float:right;display:inline-block;padding-top:50px;padding-right:10px">
                  <mt-button 
                    type="primary" 
                    style="font-size:14px;height:30px" 
                    @click.stop="checkinfo(item,'0')">查看</mt-button>
                </div>
              </div>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <mt-navbar v-model="selected3">
          <mt-tab-item 
            id="5" 
            style="border:none">
            <mt-button 
              id="color1" 
              style="font-size:16px;padding:2px 20px;height:25px;background:rgb(220, 223, 230);color:#fff" 
              @click="changecor('1')">待处理</mt-button>
          </mt-tab-item>
          <mt-tab-item 
            id="6" 
            style="border:none">
            <mt-button 
              id="color2" 
              style="font-size:16px;padding:2px 20px;height:25px;background:rgb(220, 223, 230);color:#fff" 
              @click="changecor('2')">已完成</mt-button>
          </mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected3">
          <mt-tab-container-item id="5">
            <div v-if="equilist3.length==0">
              <img 
                src="../static/zanwu.png" 
                alt 
                style="width:100%">
              <div style="text-align:center;color:#35495e">暂无相关内容</div>
            </div>
            <div v-else>
              <div 
                v-for="(item, index) in equilist3" 
                :key="index" 
                class="equi-div1" 
                @click="checkinfo(item,'1')">
                <div class="equi-left">
                  <h3 class="h3_equi">{{ item.hash.atypename }}</h3>
                  <div class="equi-div equi-gz">
                    <span class="equi-span2">
                      提交人：
                      <b style="color:rgb(38, 162, 255);font-weight:normal">{{ item.hash.createusername }}</b>
                    </span>
                  </div>
                  <div 
                    class="equi-div" 
                    style="display:flex">
                    <span class="equi-span2">
                      提交时间：
                      <b style="color:rgb(104, 104, 104);font-weight:normal">{{ item.hash.intime }}</b>
                    </span>
                  </div>
                  <div class="equi-div equi-gz">
                    <span class="equi-span2">
                      部门：
                      <b style="color:rgb(144, 147, 153);font-weight:normal">{{ item.hash.bumen }}</b>
                    </span>
                  </div>
                  <div class="equi-div equi-gz">
                    <span class="equi-span2">
                      操作人：
                      <b style="color:rgb(29, 206, 87);font-weight:normal">{{ item.hash.caozuoren }}</b>
                    </span>
                  </div>
                  <div 
                    class="equi-div" 
                    style="display:flex">
                    <span class="equi-span2">
                      内容：
                      <b style="color:rgb(144, 147, 153);font-weight:normal">{{ item.hash.content }}</b>
                    </span>
                  </div>
                  <div 
                    class="equi-div" 
                    style="display:flex">
                    <span class="equi-span2">
                      状态：
                      <b v-if="item.hash.status=='1'">审批中</b>
                      <b 
                        v-if="item.hash.status=='-1'" 
                        style="color:red">被驳回</b>
                      <b 
                        v-if="item.hash.status=='0'" 
                        style="color:#666666">申请人撤回</b>
                      <b v-if="item.hash.status=='2'">通过</b>
                    </span>
                  </div>
                </div>
                <div style="float:right;display:inline-block;padding-top:50px;padding-right:10px">
                  <mt-button 
                    type="primary" 
                    size="small" 
                    @click.stop="checkinfo(item,'1')">查看</mt-button>
                </div>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="6">
            <div v-if="equilist4.length==0">
              <img 
                src="../static/zanwu.png" 
                alt 
                style="width:100%">
              <div style="text-align:center;color:#35495e">暂无相关内容</div>
            </div>
            <div v-else>
              <div 
                v-for="(item, index) in equilist4" 
                :key="index" 
                class="equi-div1" 
                @click="checkinfo(item,'0')">
                <div class="equi-left">
                  <h3 class="h3_equi">{{ item.hash.atypename }}</h3>
                  <div class="equi-div equi-gz">
                    <span class="equi-span2">
                      提交人：
                      <b style="color:rgb(38, 162, 255);font-weight:normal">{{ item.hash.createusername }}</b>
                    </span>
                  </div>
                  <div 
                    class="equi-div" 
                    style="display:flex">
                    <span class="equi-span2">
                      提交时间：
                      <b style="color:rgb(104, 104, 104);font-weight:normal">{{ item.hash.maxrecordtime }}</b>
                    </span>
                  </div>
                  <div class="equi-div equi-gz">
                    <span class="equi-span2">
                      部门：
                      <b style="color:rgb(144, 147, 153);font-weight:normal">{{ item.hash.bumen }}</b>
                    </span>
                  </div>
                  <div class="equi-div equi-gz">
                    <span class="equi-span2">
                      操作人：
                      <b style="color:rgb(29, 206, 87);font-weight:normal">{{ item.hash.caozuoren }}</b>
                    </span>
                  </div>
                  <div 
                    class="equi-div" 
                    style="display:flex">
                    <span class="equi-span2">
                      内容：
                      <b style="color:rgb(144, 147, 153);font-weight:normal">{{ item.hash.content }}</b>
                    </span>
                  </div>
                  <div 
                    class="equi-div" 
                    style="display:flex">
                    <span class="equi-span2">
                      状态：
                      <b v-if="item.hash.status=='1'">审批中</b>
                      <b 
                        v-if="item.hash.status=='-1'" 
                        style="color:red">被驳回</b>
                      <b 
                        v-if="item.hash.status=='0'" 
                        style="color:#666666">申请人撤回</b>
                      <b v-if="item.hash.status=='2'">通过</b>
                    </span>
                  </div>
                </div>
                <div style="float:right;display:inline-block;padding-top:50px;padding-right:10px">
                  <mt-button 
                    type="primary" 
                    style="font-size:14px;height:30px" 
                    @click.stop="checkinfo(item,'0')">查看</mt-button>
                </div>
              </div>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
        <!-- <div v-if="equilist.length==0">
          <img src="../static/zanwu.png" alt style="width:100%" />
          <div style="text-align:center;color:#35495e">暂无相关内容</div>
        </div>
        <div v-else>
          <div v-for="(item, index) in equilist" :key="index" class="equi-div1">
            <div class="equi-left">
              <h3 class="h3_equi">{{ item.hash.atypename }}</h3>
              <div class="equi-div equi-gz">
                <span class="equi-span2">提交人：{{ item.hash.createusername }}</span>
              </div>
              <div class="equi-div" style="display:flex">
                <span class="equi-span2">提交时间：{{ item.hash.intime }}</span>
              </div>
              <div class="equi-div equi-gz">
                <span class="equi-span2" style="color:#26a2ff">进行中</span>
              </div>
            </div>
            <div style="float:right;display:inline-block;padding-top:50px;padding-right:10px">
              <mt-button
                type="primary"
                style="font-size:14px;height:30px"
                @click="checkinfo(item)"
              >查看</mt-button>
            </div>
          </div>
        </div>-->
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
export default {
  components: {},
  layout: 'default2',
  data() {
    return {
      equilist1: [
        {
          hash: {
            atypename: '',
            createusername: '',
            intime: ''
          }
        }
      ],
      equilist2: [],
      equilist3: [],
      equilist4: [],
      ts: this.newStore(),
      selected: '1',
      selected2: '3',
      selected3: '5',
      htitle: '审批'
    }
  },
  created() {
    this.getapprovallist1()
    this.getapprovallist2()
    this.getapprovallist3()
    this.getapprovallist4()
  },
  mounted() {
    console.log(this.$route.query.name2, 'name1')
    if (this.$route.query.selected) {
      this.selected = this.$route.query.selected
    }
    if (this.$route.query.selected2) {
      this.selected2 = this.$route.query.selected2
    }
    if (this.$route.query.selected3) {
      this.selected3 = this.$route.query.selected3
    } //console.log(GetQueryString('name'),'GetQueryString');
    var acolor = document.getElementById('color1')
    var bcolor = document.getElementById('color3')
    acolor.style.color = 'rgb(255, 255, 255)'
    acolor.style.background = 'rgb(38, 162, 255)'
    bcolor.style.color = 'rgb(255, 255, 255)'
    bcolor.style.background = 'rgb(38, 162, 255)'
  },
  methods: {
    GetRequest(value) {
      //url例子：www.bicycle.com?id="123456"&Name="bicycle"；
      var url = decodeURI(location.search) //?id="123456"&Name="bicycle";
      var object = {}
      if (url.indexOf('?') != -1) {
        //url中存在问号，也就说有参数。
        var str = url.substr(1) //得到?后面的字符串
        var strs = str.split('&') //将得到的参数分隔成数组[id="123456",Name="bicycle"];
        for (var i = 0; i < strs.length; i++) {
          object[strs[i].split('=')[0]] = strs[i].split('=')[1]
        }
      }
      return object[value]
    },
    UrlSearch() {
      var name, value
      var str = location.href //取得整个地址栏
      var num = str.indexOf('?')
      str = str.substr(num + 1)
      //console.log(str,'str');
      var arr = str.split('&')
      for (var i = 0; i < arr.length; i++) {
        num = arr[i].indexOf('=')
        if (num > 0) {
          name = arr[i].substring(0, num)
          value = arr[i].substr(num + 1)
          this[name] = value
        }
      }
    },
    option() {
      this.$router.push({
        name: 'jbrhome',
        query: {
          name: ''
        }
      })
    },
    changecor(num) {
      //var url = decodeURI(location.search)
      //var b = GetRequest('name')
      //console.log(url, 'b')

      //var Request = new UrlSearch()
      //console.log(Request.name, 'value')

      var a = document.getElementById('color1')
      var b = document.getElementById('color2')
      a.style.background = 'rgb(220, 223, 230)'
      a.style.color = 'rgb(o,o,o)'
      b.style.background = 'rgb(220, 223, 230)'
      b.style.color = 'rgb(o,o,o)'
      if (num == '1') {
        this.getapprovallist3()

        a.style.background = 'rgb(38, 162, 255)'
        a.style.color = 'rgb(255, 255, 255)'
      } else if (num == '2') {
        this.getapprovallist4()

        b.style.background = 'rgb(38, 162, 255)'
        b.style.color = 'rgb(255, 255, 255)'
      }
    },
    changecor2(num) {
      var a = document.getElementById('color3')
      var b = document.getElementById('color4')

      a.style.background = 'rgb(220, 223, 230)'
      a.style.color = 'rgb(o,o,o)'
      b.style.background = 'rgb(220, 223, 230)'
      b.style.color = 'rgb(o,o,o)'
      if (num == '1') {
        this.getapprovallist1()

        a.style.background = 'rgb(38, 162, 255)'
        a.style.color = 'rgb(255, 255, 255)'
      } else if (num == '2') {
        this.getapprovallist2()
        b.style.background = 'rgb(38, 162, 255)'
        b.style.color = 'rgb(255, 255, 255)'
      }
    },
    goequiinfo() {
      this.$router.push('/trainplaninfo')
    },
    checkinfo(item, ismy) {
      console.log(item, 'item123')

      this.$router.push({
        name: 'approvalinfo',
        query: {
          name: item.hash.atypename,
          id: item.hash.id,
          atype: item.hash.atype,
          status: item.hash.status,
          selected: this.selected,
          selected2: this.selected2,
          selected3: this.selected3,
          ismy: ismy
        }
      })
    },
    gocehui(item) {
      this.$messagebox.confirm('确认撤回审批？').then(action => {
        if (action == 'confirm') {
          const req = {
            handle:
              '9000B8B8D347526960C5BAB1FB6894EF8840DAE4ED8972730B580809D549F3A2883DD87A60EFB7C7',
            approvalid: item.hash.id
          }
          this.spost(this.ts, '/mainservlet', req).then(ts => {
            if (ts.d.sflag == 'success') {
              this.$messagebox('撤回成功！', '提示').then(() => {
                this.getapprovallist1()
              })
            }
          })
        }
      })
    },
    getapprovallist1() {
      const req = {
        handle:
          '9000B8B8D347526960C5BAB1FB6894EFB2C5F6497939F0A364DB999BBBD87697C67B86E4BCAC0AA3',
        limit: 100000
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.equilist1 = ts.d.data.operation1
          console.log(ts.d.data.operation1, 'one')
        }
      })
    },
    getapprovallist2() {
      const req = {
        handle:
          '9000B8B8D347526960C5BAB1FB6894EFB2C5F6497939F0A350E6046D0D589337B9558C6AE5E9678B',
        limit: 100000
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.equilist2 = ts.d.data.operation1
          console.log(ts.d.data.operation1, 'two')
        }
      })
    },
    getapprovallist3() {
      const req = {
        handle:
          '9000B8B8D347526960C5BAB1FB6894EFDAA9E0F0A8692CC8EEBAA5844184BC51804F94D95BA43906',
        limit: 100000
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.equilist3 = ts.d.data.operation1
          console.log(ts.d.data, 'three')
        }
      })
    },
    getapprovallist4() {
      const req = {
        handle:
          '9000B8B8D347526960C5BAB1FB6894EFDAA9E0F0A8692CC8EEBAA5844184BC517046F804ED0A16D2',
        limit: 100000
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.equilist4 = ts.d.data.operation1
          console.log(ts.d.data, 'four')
        }
      })
    }
  }
}
</script>
<style scoped>
html {
  background: #f3f3f3;
}
.equi-div {
  font-size: 12px;
  line-height: 20px;
  color: #969191;
}
.equi-shebei {
  display: inline-block;
  padding: 1px 10px;
  color: #fff !important;
  background: rgb(51, 51, 51);
}
.h3_equi {
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
}
.equi-div1 {
  font-size: 16px;
  line-height: 25px;
  width: 100%;
  background: #fff;
  /* margin: 0 10px; */
  /* border-bottom: 1px solid #ddd; */
  margin-bottom: 10px;
}
.equi-span {
  color: #35495e;
}
.mint-navbar .mint-tab-item.is-selected {
  margin-bottom: 0px !important;
  border-bottom: 3px solid #26a2ff;
}
.equi-xq {
  line-height: 90px;
  /* padding-left: 20px; */
  color: #26a2ff;
  float: right;
  /* background: #ddd; */
  margin-top: 5px;
  width: 20%;
  text-align: center;
  border-left: 1px solid #ddd;
}
.equi-left {
  /* width: 100%; */
  display: inline-block;
  /* float: left; */
  padding-right: 0px;
  /* margin: 0 auto; */
  width: 75%;
  padding: 10px;
  background: #fff;
}
.mint-search {
  height: 7vh;
}
.mint-searchbar {
  background: #f3f3f3 !important;
}
.mint-tab-item-label {
  font-size: 16px !important;
}
</style>
